<!--
 * @Date: 2023-03-22 12:01:07
 * @LastEditTime: 2023-04-14 20:35:37
 * @FilePath: /nlk/src/views/fundManage/fundManage.vue
 * 介绍:理财
-->
<script lang="ts" setup>
import { addCache, removeCache } from "@@/hooks/routeCache";
import { apiApplyBuyLogs, ApplyBuyLogs } from "@@/api/module/pagingList";
import { apiApplyBuyBack } from "@@/api/page/fundManage";
import { formatNumber } from "@@/utils/tools/tools";
import CrequestList from "@@/components/common/CrequestList/CrequestList.vue";
import { removeByIndex } from "@@/utils/tools/array";
import { showDialog } from "vant";
import dayjs from "dayjs";
import { useCurrentData } from "@@/hooks/date";
import { getCountdown } from "@@/utils/tools/date";
import toast from "@@/hooks/toast";
import useBalanceStore from "@@/store/useBalanceStore";

addCache("fundManage");
const { t } = useI18n();
const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);

function onAppLyBuyBackBtn(
  item: ApplyBuyLogs.ResItem,
  index: number,
  can: boolean
) {
  if (!can) return toast.text(t("zan-wei-dao-shu-hui-shi-jian"));
  showDialog({
    title: t("qing-que-ren"),
    message: t("shu-hui-sheng-gou-chan-ping"),
  }).then(() => appLyBuyBack(item, index));
}
async function appLyBuyBack(item: ApplyBuyLogs.ResItem, index: number) {
  const res = await apiApplyBuyBack({ id: item.id! });
  if (res !== true) return;
  removeByIndex(CrequestListRef.value?.apiData, index);
}
const { currentDate } = useCurrentData();

/**计算按钮文本 */
function getBtnText(item: ApplyBuyLogs.ResItem) {
  const maturity = dayjs(item.created_at).add(item.day, "day");
  if (maturity.isBefore(currentDate.value)) {
    if (item.auto_repeat == 1) {
      item.created_at = dayjs().format("YYYY-MM-DD HH:mm:ss");
      removeCache("fundManage");
    } else return t("shu-hui");
  }
  const tm = getCountdown(currentDate.value, maturity);
  return `${tm.D}:${tm.h}:${tm.m}:${tm.s} ${
    Number(item.day) == 1 ? t("shu-hui") : ""
  }`;
}
/**获取倒计时状态 true：到期；false：未到期 */
function getTimeStatus(item: ApplyBuyLogs.ResItem) {
  const maturity = dayjs(item.created_at).add(item.day, "day");
  return maturity.isBefore(currentDate.value);
}

const CrequestListRef = ref<InstanceType<typeof CrequestList>>();
</script>

<template>
  <CpageView class="fundManage auto-MT-lg">
    <BtabbarNav class="C-T5" :title="$t('li-cai')" />
    <Ccard class="contentCard">
      <h3>{{ $t("ding-dan-lie-biao") }}</h3>
      <CrequestList ref="CrequestListRef" :api="apiApplyBuyLogs">
        <template
          #item="{ item, index }: { item: ApplyBuyLogs.ResItem, index: number }"
        >
          <div
            @click="
              $router.push({
                name: 'fundDetail',
                query: {
                  data: JSON.stringify(item),
                },
              })
            "
            class="list_item"
          >
            <div class="T-S-sm">{{ $t("shen-gou-jin-e") }}</div>
            <div class="C-M1 MT-sm">
              {{ formatNumber(item.base_number, 4) }}{{ item.store.name }}
            </div>
            <div class="grid-info">
              <div>{{ $t("lei-xing") }}</div>
              <div v-if="item.day !== 1">
                {{ item.day }}{{ $t("tian-li-cai") }}
              </div>
              <div v-else>{{ $t("sui-cun-sui-qu") }}</div>
              <div>{{ $t("lei-ji-shou-yi") }}</div>
              <div>
                {{ formatNumber(item.total_reward, 4) }}
                {{ coinEnum.USDK?.code || coinEnum.NLK?.code }}
              </div>
              <div>{{ $t("shou-yi-shuai") }}</div>
              <div>{{ formatNumber(Number(item.multiple) * 100) }}%</div>
              <div>{{ $t("zuo-ri-shou-yi") }}</div>
              <div>
                {{ formatNumber(item.yesterday_reward, 4) }}
                {{ coinEnum.USDK?.code || coinEnum.NLK?.code }}
              </div>
              <div>
                {{ $t("ri-qi") }}
                <span>
                  {{ dayjs(item.created_at).format("MM-DD HH:mm:ss") }}
                </span>
              </div>
              <VanButton
                @click.stop="
                  onAppLyBuyBackBtn(item, index, getTimeStatus(item))
                "
                style="min-width: 5em"
                color="var(--C-success)"
                size="small"
                square
              >
                {{ getBtnText(item) }}
              </VanButton>
              <!-- <div>{{ $t("xiang-qing") }}</div>
              <VanButton
                @click="
                  $router.push({
                    name: 'fundDetail',
                    query: {
                      data: JSON.stringify(item),
                    },
                  })
                "
                style="min-width: 5em"
                size="small"
                square
              >
                {{ $t("ding-dan-xiang-qing") }}
              </VanButton> -->
            </div>
          </div>
        </template>
      </CrequestList>
    </Ccard>
  </CpageView>
</template>

<style lang="less" scoped>
.fundManage {
  background-color: var(--C-T1);
  padding: 0 !important;
}
.contentCard {
  min-height: calc(var(--page-H) - 100rem);
}
.grid-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--T-S-sm);
  margin-top: var(--gap-sm);
  & > * {
    &:nth-child(2n + 1) {
      color: var(--C-T4);
    }
    &:nth-child(2n + 2) {
      justify-self: end;
    }
  }
}
.list_item {
  padding: var(--gap-md) 0;
  border-bottom: var(--C-OT2) solid 1rem;
}
</style>
